<template>
  <footer>
    <ul>
      <li
        :class="activeHeaderMenu === 'home' ? 'active' : ''"
        @click="$commonJs.goPage('home')"
      >
        <span class="iconfont iconshouye"></span><br />
        <span>首页</span>
      </li>
      <li
        :class="activeHeaderMenu === 'goodsCenter' ? 'active' : ''"
        @click="$commonJs.goPage('goodsCenter')"
      >
        <span class="iconfont iconshangpin"></span><br />
        <span>商品中心</span>
      </li>
      <li
        :class="activeHeaderMenu === 'shoppingCart' ? 'active' : ''"
        @click="$commonJs.goPage('shoppingCart')"
      >
        <span class="iconfont icongouwuche"></span><br />
        <span>购物车</span>
      </li>
      <li
        :class="activeHeaderMenu === 'person' ? 'active' : ''"
        @click="$commonJs.goPage('person')"
      >
        <span class="iconfont icongerenzhongxin"></span><br />
        <span>个人中心</span>
      </li>
    </ul>
  </footer>
</template>

<script>
export default {
  name: "mobileIndex",
  computed: {
    activeHeaderMenu() {
      return this.$store.state.activeHeaderMenu;
    }
  }
};
</script>

<style scoped lang="stylus">
footer {
  width: 100%;
  border-top: 1px solid #e1e1e1;
  height: 98px;
  background-color #ffffff;
  ul {
    height 100%;
    font-size: 0;
    flex_content();
    flex_align_center();
    li {
      flex_one()
      text-align: center;
      color: #999999;
      font-size: 20px;
      .iconfont {
        font-size: 40px;
      }
      span {
        display: inline-block;
        margin-top: 10px;
      }
    }
    .active {
      color: color-primary;
    }
  }
}
</style>
